<tpl var layoutStyle={ />
<style>
	.layui-input-avatar {
		display: inline-block;
		text-align: center;
	}

	.layui-input-avatar::after {
		content: "点击切换头像";
		font-size: 12px;
		color: #666;
	}

	.layui-input-avatar .layui-input-avatar-view {
		display: block;
		width: 80px;
		height: 80px;
		cursor: pointer;
		border: 1px solid #eee;
		margin: 0px auto 5px auto;
	}

	.layui-input-avatar .layui-input-avatar-value {
		display: none;
	}
</style>
<tpl }; />
<tpl var layoutBody={ />
<div data-identity="sys:user" data-table="sys_user">
	<div class="layui-breadcrumb">
		<a href="/manage/index.jspx">首页</a>
		<a href="/manage/sys/user/index.jspx">用户管理</a>
		<a href="javascript:;">
			<cite>修改</cite>
		</a>
	</div>
	<hr>
	<fieldset class="layui-elem-field">
		<legend>修改 用户管理</legend>
		<div class="layui-field-box">
			<form class="layui-form" action="save.json?oper=update" lay-filter="mSysUserForm">
				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="account">
					<label class="layui-form-label">用户帐号：</label>
					<div class="layui-input-block">
						<input type="text" name="account" placeholder="请输入用户帐号" autocomplete="off" class="layui-input" value="${record.account!}" readonly>
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="name">
					<label class="layui-form-label">用户名称：</label>
					<div class="layui-input-block">
						<input type="text" name="name" placeholder="请输入用户名称" autocomplete="off" class="layui-input" value="${record.name!}">
					</div>
				</div>
				<div class="layui-form-item" data-type="int" data-isnull="NO" data-name="role_id">
					<label class="layui-form-label">用户角色：</label>
					<div class="layui-input-block">
						<select name="roleId" class="layui-input">
							<option value="">请选择用户角色</option>
							<tpl for(item in roles){ />
							<option value="${item.id}" ${selected(item.id,record.roleId)}>${item.name}</option>
							<tpl } />
						</select>
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="password">
					<label class="layui-form-label">用户密码：</label>
					<div class="layui-input-block">
						<input type="text" name="password" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="phone">
					<label class="layui-form-label">联系方式：</label>
					<div class="layui-input-block">
						<input type="text" name="phone" placeholder="请输入用户联系方式" autocomplete="off" class="layui-input" value="${record.phone!}">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="qq">
					<label class="layui-form-label">联系QQ：</label>
					<div class="layui-input-block">
						<input type="text" name="qq" placeholder="请输入联系QQ" autocomplete="off" class="layui-input" value="${record.qq!}">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="email">
					<label class="layui-form-label">联系邮箱：</label>
					<div class="layui-input-block">
						<input type="text" name="email" placeholder="请输入联系邮箱" autocomplete="off" class="layui-input" value="${record.email!}">
					</div>
				</div>
				<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="avatar">
					<label class="layui-form-label">头像：</label>
					<div class="layui-input-avatar" id="user-avatar">
						<img src='${record.avatar!,image="avatar"}' id="upload" class="layui-input-avatar-view">
						<input type="text" name="avatar" class="layui-input-avatar-value" value="${record.avatar!}">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="mSysUserForm">立即提交</button>
					</div>
				</div>
			</form>
		</div>
	</fieldset>
</div>
<tpl }; />

<tpl var layoutScript={ />
<script>
	layui.use(['element', 'upload', 'form'], function () {
		// 绑定表单提交事件
		layui.form.on('submit(mSysUserForm)', function (data) {
			$.postLoading('save.json?oper=update', data.field, function (res) {
				layer.msg(res.message, {
					icon: 1,
					time: 1500
				}, function () {
					history.back();
				});
			});

			return false;
		});

		// 头像上传组件
		layui.upload.render({
			elem: '#upload',
			url: '/upload/image.json',
			done: function (res) {
				if (!res || !res.success) return layer.msg(res.message || '上传失败');

				$('#user-avatar img').attr('src', '/down/image/' + res.data);
				$('#user-avatar input[name="avatar"]').val(res.data);
			},
			error: function () {
				layer.msg('上传失败');
			}
		});
	});
</script>
<tpl }; />
<tpl include( "../../tpl/layout-scroll.html",{identity: "sys:user",layoutStyle:layoutStyle,layoutBody:layoutBody,layoutScript:layoutScript}){}/>